<template>
  <div class="right-container">
    <div class="form">
      <div class="form-title">民事起诉状</div>
      <div class="form-item">
        <div class="form-item-label">原告：</div>
        <div class="form-item-value">
          <span>{{info.yg}}{{info.yg2}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">
          <span>{{info.fddlr}}：</span>
        </div>
        <div class="form-item-value">
          <span>{{info.fzr}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">地址：</div>
        <div class="form-item-value">
          <span>{{info.dz}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">代理人：</div>
        <div class="form-item-value">
          <span>{{info.dlr2[0].value}}</span>
        </div>
      </div>
      <div v-show="dlrHtml!=''" class="form-item">
        <div class="form-item-label"></div>
        <div v-html="dlrHtml" class="form-item-value">
          <span>{{buildSecDlr}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">送达地址：</div>
        <div class="form-item-value">上海市浦东新区世纪大道88号1706室</div>
      </div>
      <div class="form-item">
        <div class="form-item-label">被告：</div>
        <div class="form-item-value">
          <span>{{getBgInfo()}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">身份证：</div>
        <div class="form-item-value">
          <span>{{info.sfz}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">住址：</div>
        <div class="form-item-value">
          <span>{{info.liveAdress}}</span>
        </div>
      </div>
      <div v-show="info.hjd!==''" class="form-item">
        <div class="form-item-label">户籍地：</div>
        <div class="form-item-value">
          <span>{{info.hjd}}</span>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">联系电话：</div>
        <div class="form-item-value">
          <span>{{info.phone}}</span>
        </div>
      </div>
      <div class="form-title2">诉讼请求：</div>
      <div class="form-item">
        <div class="form-text">
          1. 请求法院依法判决被告支付原告已支付的代偿款&#12288;
          <span>{{toThousands(info.dck)}}</span>
          &#12288;元
        </div>
      </div>
      <div class="form-item" v-show="info.wzfbf>0">
        <div class="form-text">
          2. 请求法院依法判决被告支付未付保费&#12288;
          <span>{{toThousands(info.wzfbf)}}</span>
          &#12288;元
        </div>
      </div>
      <div class="form-item">
        <div class="form-text">
          {{num}}. 请求法院依法判决被告向原告以&#12288;
          <span>{{toThousands(info.js)}}</span>
          &#12288;为基数按日千分之一支付自&#12288;
          <span>{{info.startTime}}</span>&#12288;
          至判决生效日止的违约金，暂算至&#12288;
          <span>{{info.endTime}}</span>&#12288;
          ，违约金为
          <span>{{toThousands(info.wyj)}}</span>元;
        </div>
      </div>
      <div class="form-item">
        <div class="form-text">{{num+1}}. 请求法院依法判决被告承担本案的诉讼费、公告费等相关费用。</div>
      </div>
      <div class="form-title2">事实与理由：</div>
      <div class="form-item">
        <div class="form-text">
          被告
          <span>{{info.bxdInfo}}</span>

          <span>{{info.chuJuTime}}</span> &#12288;出具相应《保险单》，保险单约定：被保险人为
          <span>{{info.bbxr}}</span>，保险金额为&#12288;
          <span>{{toThousands(info.bxMoney)}}</span>&#12288;元，保险期间自个人贷款合同项下贷款发放之日起，至清偿贷款全部本息之日止，保费缴纳方式为每月按时缴纳，缴纳日期为约定扣款之日，月保费率为&#12288;
          <span>{{info.bxRate}}%</span>&#12288;。每月保险费为&#12288;
          <span>{{toThousands(info.monthPremium)}}</span>&#12288;元；投保人拖欠任何一期贷款达80天（不含），保险人依据保险合同约定向被保险人进行理赔。被告与被保险人于&#12288;
          <span>{{info.signTime}}</span>&#12288;
          <span>{{info.qd}}</span>
          《{{info.dkhtName}}》。原告系被告的保证人。被告于&#12288;
          <span>{{info.dkTime}}</span>&#12288;收到被保险人发放的贷款&#12288;
          <span>{{toThousands(info.ffdk)}}</span>&#12288;元，原被告的保险合同约定，在保险期间内，被告拖欠被保险人任何一期贷款达80天（不含），原告即向被保险人进行理赔，理赔后原告有权要求被告支付理赔款项、未付保费、违约金、理赔及催收产生的其它费用等。现因被告未继续按照贷款协议履行还款义务，原告于&#12288;
          <span>{{info.startTime}}</span>向被保险人支付代偿款&#12288;
          <span>{{info.dck}}</span>&#12288;元，故依法取得代位向被告求偿的权利。
        </div>
        <div
          class="form-text"
        >&#12288;&#12288;原告多次向被告进行追讨，但被告均不予理睬，为保障原告的合法权益，特依《中华人民共和国民事诉讼法》相关条款向贵院提起诉讼，望判如所请，请如所愿。</div>
      </div>
      <div class="form-item" style="text-align:right;">
        <div class="right-info">
          <div class="info-item">
            具状人：&#12288;
            <span>{{info.yg}}</span>&#12288;
          </div>
          <div class="info-item">
            &#12288;
            <span>{{info.yg2}}</span>&#12288;
          </div>
          <div class="info-item">盖章</div>
          <div class="info-item">
            &#12288;
            <span>{{info.editTime}}</span>&#12288;
          </div>
        </div>
      </div>
      <div class="form-title2">附诉讼请求计算明细：</div>
      <div class="form-item">
        <div class="form-text">
          1. 请求法院依法判决被告支付原告已支付的代偿款&#12288;
          <span>{{toThousands(info.dck)}}</span>
          &#12288;元
        </div>
      </div>

      <div class="form-item" v-show="info.wzfbf>0">
        <div class="form-text">
          2. 未付保费&#12288;
          <span>{{toThousands(info.wzfbf)}}</span>
          &#12288;元
        </div>
      </div>
      <div class="form-item">
        <div class="form-text">
          {{num}}. 违约金，自&#12288;
          <span>{{info.startTime}}</span>
          暂算至&#12288;
          <span>{{info.endTime}}</span>
          ，共计&#12288;
          <span>{{info.allDays}}</span>
          ，违约金为：上述（1+2）*&#12288;
          <span>{{info.rate}}</span>&#12288;*&#12288;
          <span>{{info.allDays}}</span>&#12288;=
          <span>{{toThousands(info.wyj)}}</span>元;
          <br />以上费用总计
          <span>{{toThousands(info.finalMoney)}}</span>元
        </div>
      </div>

      <div class="form-title">证据目录</div>
      <div class="form-item">
        <div class="form-text">
          1.
          <span>{{info.fullBxdName}}</span>《中国大地个人贷款保证保险保险单》
        </div>
      </div>
      <div class="form-item">
        <div class="form-text">拟证明：原被告之间的保证保险关系。</div>
      </div>
      <div class="form-item">
        <div class="form-text">
          2.《
          <span>{{info.grdkht}}</span>》
        </div>
      </div>
      <div class="form-item">
        <div class="form-text">拟证明：被告向被保险人贷款。</div>
      </div>
      <div class="form-item">
        <div class="form-text">
          3.
          <span>{{info.dw}}</span>贷款借据
        </div>
      </div>
      <div class="form-item">
        <div class="form-text">拟证明：被告已收到贷款。</div>
      </div>
      <div class="form-item">
        <div class="form-text">4.还款凭证</div>
      </div>
      <div class="form-item">
        <div class="form-text">拟证明：被告违约。</div>
      </div>
      <div class="form-item">
        <div class="form-text">5.代偿债务与权益转让确认书</div>
      </div>
      <div class="form-item">
        <div class="form-text">拟证明：原告已向被保险人支付了代偿款，履行了保险义务，取得代位求偿权。</div>
      </div>
      <div class="form-title">保全申请书</div>
      <div class="form-title2">事实与理由：</div>
      <div class="form-item" style="margin-bottom:150px">
        <div class="form-text">申请人诉被申请人<span>{{info.bqsqInfo}}</span>案</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      num: 2,
      dlrHtml: ""
    };
  },

  methods: {
    getBgInfo() {
      return (
        this.info.bg +
        "，" +
        this.info.sex +
        "，" +
        this.info.minzu +
        "，" +
        this.info.birthDay
      );
    },
    buildSecDlr() {
      let isNum = this.isNumber(this.info.dlr2[1].value.trim());
      let str = "<span>";
      if (isNum) {
        let len =
          this.info.dlr2[0].value.length -
          this.info.dlr2[1].value.trim().length;
        for (let i = 0; i < len; i++) {
          str += "&#12288;";
        }
      }
      str += this.info.dlr2[1].value.trim() + "</span>";
      this.dlrHtml = str;
      return str;
    },
    toThousands(s) {
      const n = 2;
      s = parseFloat((s + "").replace(`/[^\\d\\.-]/g`, "")).toFixed(n) + "";
      let l = s
          .split(".")[0]
          .split("")
          .reverse(),
        r = s.split(".")[1];
      let t = "";
      for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      return (
        t
          .split("")
          .reverse()
          .join("") +
        "." +
        r
      );
    },
    isNumber(val) {
      let regPos = /^\d+(\.\d+)?$/; // 非负浮点数
      let regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; // 负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
<style>
.right-container {
  position: absolute;
  top: 0rem;
  right: 0;
  width: 50%;
  height: 100%;
  text-align: left;
  overflow-y: scroll;
  padding: 3rem;
}
.right-container span {
  color: red;
}

.right-container .form {
  width: 100%;
  height: 100%;
}
.right-container .form-title {
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
}

.right-container .form-title2 {
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}
.right-container .form .form-item {
  width: 100%;
  padding: 0.5rem 1rem;
}

.right-container .form .form-item .right-info {
  width: 60%;
  text-align: center;
  display: inline-block;
}
.right-container .form .form-item .right-info .info-item {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 18px;
}
.right-container .form .form-item .form-text {
  width: 100%;
  font-size: 18px;
  line-height: 38px;
}
.right-container .hidden {
  display: none;
}
.right-container .form .form-item .form-item-label {
  display: inline-block;
  width: 8rem;
  font-size: 1rem;
}
.right-container .form .form-item .form-item-value {
  display: inline-block;
  width: calc(100% - 8rem);
  font-size: 1rem;
}
</style>

